<template>
  <div>
    <div class="topSearch">
      <p>
        <el-select size="small" style="width: 250px" placeholder="按品牌搜索" v-model="params.brandId">
          <el-option v-for="(a,i) in systemList" :value="a.id" :label="a.systemName" :key="i"></el-option>
        </el-select>
      </p>
      <p>
        <el-select size="small" style="width: 250px" placeholder="请选择仓库名称" v-model="params.areaId">
          <el-option v-for="(a,i) in areaData" :value="a.area" :label="a.areaName" :key="i"></el-option>
        </el-select>
      </p>
      <p>
        <el-input size="small" style="width: 250px" placeholder="请输入店铺名称" v-model="params.storeName">
        </el-input>
      </p>
      <p>
        <el-select size="small" style="width: 250px" placeholder="请选择付款类型" v-model="params.paymentMethod">
          <el-option
              v-for="(item, index) in payTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </p>
      <p>
        <el-button size="small" type="primary" @click="_search">搜 索</el-button>
        <el-button size="small" type="info" @click="_reset">重 置</el-button>
        <el-button size="small" type="primary" @click="_add" v-if="authority.includes(1401)">新增</el-button>
      </p>
    </div>
    <div class="centerTable" style="margin-top: 10px">
      <el-table :data="ddbData" border
                height="calc(100vh - 210px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '14px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
          fontSize: '13px'
        }"
      >
        <el-table-column type="index" label="序号" width="60px"></el-table-column>
        <el-table-column prop="storeName" label="店铺名称" width="180px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="orderType" label="订单类型" width="180px" show-overflow-tooltip>
          <template v-slot:default="scope">
            {{ scope.row.orderType == 1 ? '洞洞板' : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="所属仓库" show-overflow-tooltip></el-table-column>
        <el-table-column prop="brandName" label="所属品牌" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="paymentMethodName" label="付款方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="totalSale" label="报价单金额" show-overflow-tooltip></el-table-column>
        <el-table-column prop="totalReceipt" label="收款金额" show-overflow-tooltip></el-table-column>
        <el-table-column prop="receiptDate" label="收款日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" width="180px" show-overflow-tooltip>
          <template v-slot:default="scope">
            {{ scope.row.status == 0 ? '未发货' : "已发货" }}
          </template>
        </el-table-column>
        <el-table-column prop="op" label="操作">
          <template v-slot:default="a">
            <el-link type="primary" @click="_detail(a.row)" v-if="authority.includes(1402)">详情</el-link>
            <el-link type="warning" style="margin-left: 10px" @click="recordDelivery(a.row)" v-if="a.row.status==0&&authority.includes(1403)">
              去发货
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="padding: 20px 0"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="addDialog" title="新增洞洞板订单" center width="35%">
      <div class="box">
        <p>
          <span>订单名称：</span>
          <el-select
              filterable
              remote
              :remote-method="inputChange"
              value-key="orderId"
              clearable
              v-model="data.orderId"
              size="small"
              style="width: 300px"
              placeholder="请选择"
          >
            <el-option
                v-for="item in saleNameList"
                :key="item.orderId"
                :label="item.storeName"
                :value="item.orderId"
            >
            </el-option>
          </el-select>
        </p>
        <p><span>付款方式:</span>
          <el-select v-model="data.paymentMethod" size="small" style="width: 300px">
            <el-option
                v-for="(item, index) in payTypeList"
                :key="index"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </p>
        <p><span>订单类型:</span>
          <el-select size="small" style="width: 300px" placeholder="请选择" v-model="data.orderType">
            <el-option label="洞洞板" :value="1"></el-option>
          </el-select>
        </p>
        <p><span>报价单金额:</span>
          <el-input v-model="data.totalSale" size="small" style="width: 300px" placeholder="请输入"></el-input>
        </p>
        <p><span>收款金额:</span>
          <el-input v-model="data.totalReceipt" size="small" style="width: 300px" placeholder="请输入"></el-input>
        </p>
        <p><span>收款日期:</span>
          <el-date-picker type="date" v-model="data.receiptDate" value-format="yyyy-MM-dd" size="small"
                          style="width: 300px" placeholder="请选择"></el-date-picker>
        </p>
        <p style="width: 380px"><span>收款凭证：</span></p>
        <el-upload
            class="upload-demo"
            drag
            :headers="headers"
            :action="`${$apiHost}/common/fileImgUrl`"
            :on-success="onSuccess1"
            :show-file-list="false"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div style="display: flex;">
          <p v-for="(item,index) in receiptVoucher">
            <el-image :src="'https://'+item" style="width: 35px;height: 35px"
                      :preview-src-list="receiptVoucher.map((a)=>'https://'+a)"></el-image>
            <span @click="_delete1(index)"
            ><el-icon class="el-icon-delete" style="font-size: 14px"></el-icon
            ></span>
          </p>
        </div>
        <p style="width: 380px;margin-top: 15px"><span>订单凭证：</span></p>
        <el-upload
            class="upload-demo"
            drag
            :headers="headers"
            :action="`${$apiHost}/common/fileImgUrl`"
            :on-success="onSuccess2"
            :show-file-list="false"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div style="display: flex;">
          <p v-for="(item,index) in orderVoucher">
            <el-image :src="'https://'+item" style="width: 35px;height: 35px"
                      :preview-src-list="orderVoucher.map((a)=>'https://'+a)"></el-image>
            <span @click="_delete2(index)"
            ><el-icon class="el-icon-delete" style="font-size: 14px"></el-icon
            ></span>
          </p>
        </div>
        <p style="margin-top: 15px"><span>备注:</span>
          <el-input v-model="data.remark" size="small" type="textarea" style="width: 300px"
                    placeholder="请输入"></el-input>
        </p>
      </div>
      <span slot="footer">
          <el-button @click="addDialog=false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">提 交</el-button>
      </span>

    </el-dialog>
    <el-dialog :visible.sync="detailDialog" title="订单详情" top="50px" center>
      <el-descriptions class="margin-top" :column="3" size="small" border>
        <el-descriptions-item>
          <template slot="label">
            所属品牌
          </template>
          {{ orderDetail.brandName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            所属仓库
          </template>
          {{ orderDetail.areaName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            创建时间
          </template>
          {{ orderDetail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            报价单金额
          </template>
          {{ orderDetail.totalSale }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            收款金额
          </template>
          {{ orderDetail.totalReceipt }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            收款日期
          </template>
          {{ orderDetail.receiptDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            订单类型
          </template>
          {{ orderDetail.orderType == 1 ? '洞洞板' : "" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            状态
          </template>
          {{ orderDetail.status == 0 ? '未发货' : "已发货" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            备注
          </template>
          {{ orderDetail.remark }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            物流公司
          </template>
          {{ getVal(orderDetail.logisticsCompanyId) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            物流单号
          </template>
          {{ orderDetail.logisticsNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            收款凭证
          </template>
          <div v-if="orderDetail.receiptVoucher">
            <el-image style="width: 50px;height: 50px" v-for="(item,index) in orderDetail.receiptVoucher.split(',')"
                      :src="'https://'+item" :key="index"
                      :preview-src-list="['https://'+item]"
            ></el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            订单凭证
          </template>
          <div v-if="orderDetail.orderVoucher">
            <el-image v-for="(item,index) in orderDetail.orderVoucher.split(',')" style="width: 50px;height: 50px"
                      :src="'https://'+item" :key="index"
                      :preview-src-list="['https://'+item]"
            ></el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>

    </el-dialog>
    <el-dialog :visible.sync="recordDialog" title="录入物流信息" top="50px" center width="30%">

      <div class="box">
        <p><span>物流公司:</span>
          <el-select v-model="record.logisticsCompanyId" size="small" style="width: 300px">
            <el-option
                v-for="(item, index) in companyList"
                :key="index"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </p>
        <p><span>物流单号:</span>
          <el-input v-model="record.logisticsNumber" size="small" style="width: 300px" placeholder="请输入"></el-input>
        </p>
      </div>
      <span slot="footer">
          <el-button @click="recordDialog=false">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ddb",
  data() {
    return {
      systemList: [],
      ddbData: [],
      record: {},
      areaData: [],
      addDialog: false,
      detailDialog: false,
      deliveryId: "",
      recordDialog: false,
      payTypeList: [],
      params: {
        pageSize: 20,
        pageNum: 1
      },
      totalCount: 0,
      authority:[],
      receiptVoucher: [],
      saleNameList: [],
      orderVoucher: [],
      orderDetail: {},
      currentPage: 1,
      data: {
        orderType: 1
      },
      companyList: [
        {name: "顺丰", id: 1},
        {name: "韵达", id: 2},
        {name: "中通", id: 3},
        {name: "申通", id: 4},
      ]
    }
  },
  created() {
    const {authorityList = []} = this.$quinn.getStorage('userData') || {}
    this.authority = authorityList
    this.getSystemType()
    this.getPayType()
    this.getList()
    this.$api.areaLedgerAreaList().then(res => {
      this.areaData = res
    })
  },
  computed: {
    headers() {
      return {
        token: this.token || window.$quinn.getStorage('token'),
      }
    },
  },
  methods: {
    getVal(val) {
      switch (val) {
        case 1:
          return '顺丰'
          break
        case 2:
          return '韵达'
          break
        case 3:
          return '中通'
          break
        case 4:
          return '申通'
          break
      }
    },
    _detail(val) {
      this.$api.orderNewDetail({id: val.id}).then(res => {
        this.detailDialog = true
        this.orderDetail = res
      })
    },
    inputChange(val) {
      if (val) {
        const params = {
          storeName: val,
        }
        this.$api.orderGetOrderInfoLikeName(params).then((res) => {
          this.saleNameList = res
        })
      }
    },
    onSuccess1(res) {
      if (res.code === 200 && res.result) {
        this.receiptVoucher.push(res.result[0])
      }
    },
    _delete1(index) {
      this.receiptVoucher.splice(index, 1)
    },
    onSuccess2(res) {
      if (res.code === 200 && res.result) {
        this.orderVoucher.push(res.result[0])
      }
    },
    _delete2(index) {
      this.orderVoucher.splice(index, 1)
    },
    async getSystemType() {
      const res = await this.$api.orderGetSystemTypeVo()
      this.systemList = res
    },
    async getPayType() {
      const res = await this.$api.orderGetPaymentMethod()
      if (res && res.length) {
        this.payTypeList = []
        this.payTypeList = res
      }
    },
    getList() {
      this.$api.orderNewPage(this.params).then(res => {
        this.ddbData = res.records
        this.totalCount = res.total
      })
    },
    _search() {
      this.params.pageNum = 1
      this.getList()
    },
    _reset() {

    },
    _add() {
      this.addDialog = true
      this.data = this.$options.data.call(this).data
    },
    onConfirm() {
      const data = {
        ...this.data,
        orderType: 1,
        orderVoucher: this.orderVoucher.toString(),
        receiptVoucher: this.receiptVoucher.toString(),
      }
      this.$api.orderNewAdd(data).then(res => {
        if (res == 1) {
          this.$message.success('提交成功！')
          this.addDialog = false
          this.getList()
        }
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getList()
    },
    recordDelivery(a) {
      this.deliveryId = a.id
      this.recordDialog = true
      this.record = this.$options.data.call(this).record
    }, submit() {
      const data = {
        ...this.record,
        id: this.deliveryId
      }
      this.$api.orderNewDelivery(data).then(res => {
        if (res == 1) {
          this.$message.success('提交成功！')
          this.recordDialog = false
          this.getList()
        }
      })
    }

  }
}
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}

.topSearch {
  display: flex;

  p {
    margin-right: 15px;
  }
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    margin-bottom: 15px;
  }

  span {
    display: inline-block;
    width: 80px;
  }
}
</style>